<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <!-- jquery -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <!-- layer -->
    <script type="text/javascript" src="/layer/layer.js"></script>
    <!-- md5.js -->
    <script type="text/javascript" src="/js/md5.min.js"></script>
    <!-- common.js -->
    <script type="text/javascript" src="/js/common.js"></script>
</head>
<body>

<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>

        <span id="userTip"> 您还没有登录，请登陆后再操作<br/></span>

    <table class="table" id="goodslist">
        <tr>
            <td>商品名称</td>
            <td colspan="3" id="goodsName"></td>
        </tr>
        <tr>
            <td>商品图片</td>
            <td colspan="3"><img id="goodsImg" width="200" height="200"/></td>
        </tr>
        <tr>
            <td>秒杀开始时间</td>
<!--            <td th:text="${#dates.format(goods.startDate, 'yyyy-MM-dd HH:mm:ss')}"></td>-->
            <td id="startTime" ></td>
        </tr>
        <tr>
            <td id="seckillTip"><input type="hidden" id="remainSeconds"/></td>
            <td>
                <button class="btn btn-primary btn-block" type="submit" id="buyButton" style="width: 300px" onclick="getSeckillPath()">立即秒杀
                    <input id="goodsId" type="hidden">
                </button>
            </td>
        </tr>
        <tr>
            <td>商品原价</td>
            <td colspan="3" id="goodsPrice" ></td>
        </tr>
        <tr>
            <td>秒杀价</td>
            <td colspan="3" id="seckillPrice"></td>
        </tr>

    </table>
</div>
</body>
<script>
    $(function () {
        getDetail()
    });

    function getSeckillPath(){
        let goodsId = $("#goodsId").val();
        g_showLoading();
        $.ajax({
            url: "/seckill/path",
            type: "GET",
            data:{
                goodsId:goodsId
            },
            success:function (data){
                if (data.code ==200){
                    doSeckill(data.data)
                }
                else {
                    layer.msg(data.msg)
                }
            },
            error(){
                layer.msg("客户端请求出错")
            }
        })
    }
    function doSeckill(path){
        let goodsId = $("#goodsId").val();
        $.ajax({
            url: "/seckill/"+path+"/do_seckill?goodsId="+goodsId,
            type:'POST',
            success:function (data) {
                console.log(data)
                if (data.code==200){
                    // console.log(data.data.id)
                    // window.location.href = "/order_detail.htm?orderId="+data.data.id;
                    getResult(goodsId)
                }
                else{
                    layer.msg(data.msg)
                }
            },
            error(data){
                layer.msg(data.msg)
            }
        })
        
    }
    function getResult(goodsId){
        g_showLoading();
        $.ajax({
            url:"/seckill/getResult",
            type: 'GET',
            data:{
                goodsId:goodsId
            },
            success:function (data){
                if (data.code ==200){
                    var result = data.data;
                    if (result<0){
                        layer.msg("库存不足,秒杀失败");
                    }else if (result ==0){
                        setTimeout(function () {
                            getResult(goodsId);
                        },50);
                    }else{
                        layer.confirm("恭喜秒杀成功！ 查看订单？",{btn:["确定","取消"]},
                            function (){
                                window.location.href = "/order_detail.htm?orderId=" +result;
                            },function (){
                                layer.close();
                            }
                        )
                    }
                }

            },
            error:function (){
                
            }
        })
    }
    function getDetail() {
        var goodsId = g_getQueryString("goodsId");
        $.ajax({
            url:"/goods/detail/"+goodsId,
            type:'GET',
            success:function (data) {
                if (data.code ==200){
                    render(data.data)
                }else {
                    layer.msg(data.msg)
                }
            },
            error:function (data){
                layer.msg(data.msg)
            }
        })
    }
    function render(data) {
        let user = data.user;
        let goodsVo = data.goodsVo;
        let remainSeconds = data.remainSeconds;
        let seckillStatus = data.seckillStatus;
        if (user){
            $("#userTip").hide()
        }
        $("#goodsName").text(goodsVo.goods_name);
        $("#goodsImg").attr("src",goodsVo.goodsImg);
        $("#startTime").text(new Date(goodsVo.startDate).format("yyyy-MM-dd hh:mm:ss"));
        $("#goodsName").text(goodsVo.goodsName);
        $("#goodsId").val(goodsVo.id);
        $("#goodsPrice").text(goodsVo.goodsPrice);
        $("#seckillPrice").text(goodsVo.seckillPrice);
        $("#remainSeconds").text(goodsVo.remainSeconds);
        countDown(remainSeconds,seckillStatus,goodsVo.stockCount)
    }
    
    function countDown(remainSeconds,seckillStatus,stockCount) {
        var timeout;
        if (remainSeconds > 0) {//秒杀还没开始，倒计时
           $("#buyButton").attr("disabled", true);
           $("#seckillTip").html("秒杀倒计时："+remainSeconds+"秒")
            timeout = setTimeout(function () {
                $("#remainSeconds").val(remainSeconds - 1);
                countDown(remainSeconds-1,seckillStatus);
            }, 1000);
        } else if (remainSeconds == 0 && seckillStatus!=2 &&stockCount>0) {//秒杀进行中
            $("#buyButton").attr("disabled", false);
            if (timeout) {
                clearTimeout(timeout);
            }
            $("#seckillTip").html("秒杀进行中");
        } else {//秒杀已经结束
            $("#buyButton").attr("disabled", true);
            $("#seckillTip").html("秒杀已经结束");
        }
    }

</script>
</html>
